<template>
	<view class="class-list-page">
		<view class="class-list-item" v-for='item in classList' :class='"color"+item.typeId' :key='item.typeId' @click='classBookList(item)'>
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classList:[
					{
						typeId:1,
						name:'玄幻奇幻'
					},
					{
						typeId:2,
						name:'武侠仙侠'
					},
					{
						typeId:3,
						name:'都市言情'
					},
					{
						typeId:4,
						name:'历史军事'
					},
					{
						typeId:5,
						name:'科幻异灵'
					},
					{
						typeId:6,
						name:'网游竞技'
					},
					{
						typeId:7,
						name:'女生频道'
					},
					
				]
			};
		},
		methods:{
			classBookList(type){
				uni.navigateTo({
				    url: `/pages/class/classDtail/classDtail?typeId=${type.typeId}&name=${type.name}`,
					animationType:'pop-in',
				    animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	.class-list-page{
		display: flex;
		flex-wrap: wrap;
		.class-list-item{
			width:28%;
			height:180rpx;
			line-height: 180rpx;
			text-align: center;
			font-size: 40rpx;
			background:#fff;
			margin:20rpx;
			color:#fff;
			font-size:32rpx;
			&.color1{
				background:#FFB432;
			}
			&.color2{
				background:#F76E88;
			}
			&.color3{
				background:#3170FF;
			}
			&.color4{
				background:#00D6B6;
			}
			&.color5{
				background:#00B1FF;
			}
			&.color6{
				background:#00B499;
			}
			&.color7{
				background:#ff55ff;
			}
			&.color8{
				background:#55ff00;
			}
			
		}
	}
</style>
